<template>
	<view>
		<uni-nav-bar fixed="true" title="群聊设置" color="#FFF" backgroundColor="#6869a8" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="body">
			<u-cell-group :border="false">
				<u-cell isLink @click="groupInfo" class="cell">
					<text slot="title" class="card bold" style="padding-left: 20rpx;">{{group.groupName}}</text>
					<view slot="icon" class="icon">
						<u-avatar :src="group.avatar" size="90"></u-avatar>
					</view>
				</u-cell>
				<u-cell isLink @click="groupMember" class="cell">
					<text slot="title" class="card">群成员</text>
				</u-cell>
			</u-cell-group>
			<view class="tip">
				群聊信息
			</view>
			<u-cell-group :border="false" class="cell">
				<u-cell>
					<text slot="title" class="card">群名称</text>
					<text slot="value" class="value">{{group.groupName}}</text>
				</u-cell>
				<u-cell>
					<text slot="title" class="card">群ID</text>
					<text slot="value" class="value">{{group.id}}</text>
				</u-cell>
				<u-cell>
					<text slot="title" class="card">群描述</text>
					<text slot="label" class="value">{{group.description}}</text>
				</u-cell>
				<u-cell isLink @click="editGroupInfo" v-if="permission > 0">
					<text slot="title" class="card">修改群信息</text>
				</u-cell>
			</u-cell-group>
			<view class="btn" @click="isQuit = true" v-if="permission<2">
				退出该群
			</view>
			<view class="btn" @click="isDismiss = true" v-if="permission === 2">
				解散该群
			</view>
			<u-modal :show="isQuit" title="温馨提示" content="确认是否退出该群?" width="500rpx" @confirm="quit"
				@cancel="isQuit = false" showCancelButton confirmColor="#6869a8">
			</u-modal>
			<u-modal :show="isDismiss" title="温馨提示" content="确认是否解散该群?" width="500rpx" @confirm="dismiss"
				@cancel="isDismiss = false" showCancelButton confirmColor="#6869a8">
			</u-modal>
		</view>

	</view>
</template>

<script>
	import util from "@/config/util.js"
	export default {
		data() {
			return {
				group: {},
				isQuit: false,
				isDismiss: false,
				permission: 0,
			}
		},
		onLoad(option) {
			let gid = option.gid
			let index = util.findGidAndAdd(gid)
			this.group = this.$store.state.chatList[index].group
			this.$request.TokenRequest({
				url: "/group/isJoin"
			}, {
				gid: gid
			}).then(res => {
				if (res.state === 200) {
					this.permission = parseInt(res.data)
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			groupInfo() {
				uni.navigateTo({
					url: "../groupInfo/groupInfo?gid=" + this.group.id
				})
			},
			groupMember() {
				uni.navigateTo({
					url: "../groupMember/groupMember?gid=" + this.group.id
				})
			},
			quit() {
				// console.log("quit")
				this.$request.TokenRequest({
					url: "/group/quitGroup"
				}, {
					gid: this.group.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "已退出该群聊",
							success() {
								uni.navigateBack({})
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			dismiss() {
				this.$request.TokenRequest({
					url: "/group/dismissGroup"
				}, {
					gid: this.group.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "已解散该群聊",
							success() {
								uni.navigateBack({})
							}
						})
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			editGroupInfo() {
				uni.navigateTo({
					url: "../editGroupInfo/editGroupInfo?group=" + JSON.stringify(this.group)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 90%;
		margin: 16rpx auto;
	}

	.card {
		font-size: 35rpx;
	}

	.bold {
		font-weight: bold;
	}

	/deep/.u-cell .u-line {
		display: none;
	}

	.cell {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.tip {
		font-size: 25rpx;
		color: #7f7f7f;
	}

	.value {
		font-size: 27rpx;
		color: #7a7a7a;
	}

	.btn {
		background-color: #fff;
		text-align: center;
		color: #EE636F;
		font-size: 35rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 20rpx;
	}
</style>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
